.app-container {
  width: 7.5rem;
  min-height: 100vh;
  background-image: url('https://i.tq121.com.cn/i/wap2017/bgs/d01.jpg');
  background-size: 100% 160%;

  .top {
    width: 100%;
    padding: 0 .3rem;
    display: flex;
    font-size: .28rem;
    align-items: center;
    box-sizing: border-box;
    color: #fff;
    margin-top: .1rem;

    span {
      margin: 0 .06rem;
    }
  }

  .tips {
    width: 100%;
    padding: 0 .3rem;
    box-sizing: border-box;
    margin-top: 1rem;

    p {
      width: 3rem;
      height: .5rem;
      line-height: .5rem;
      border-radius: .3rem;
      background: rgba(0, 0, 0, 0.2);
      color: #fff;
      font-size: .22rem;
      text-align: center;
    }
  }

  .nowWeather {
    width: 100%;
    padding: 0 .3rem;
    margin-bottom: 1rem;
    box-sizing: border-box;

    p {
      font-size: 1.79rem;
      color: #fff;
      font-weight: 500 !important;
      padding: 0;
      margin: 0;
      font-family: "HelveticaThin"
    }
    .nowSetting{
      display: flex;
      ul{
        display: flex;
        padding: 0;
        margin: 0;
        li{
          padding: .1rem .3rem;
          margin:0;
          background: rgba(0, 0, 0, 0.2);
          border-radius: 8px;
          list-style: none;
          color: #fff;
          margin-right: 20px;
        }
      }
    }
  }

  .weekWeather {
    width: 100%;
    height: 8.2rem;
    // margin-top: 5rem;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    ul {
      display: flex;
      height: 100%;
      padding: 0;
      margin: 0;

      li {
        width: 14.2%;
        height: 100%;
        list-style: none;
        border-right: 1px dashed rgba(255, 255, 255, 0.16);
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;

        p {
          margin-top: 0;
        }

        h6 {
          font-size: .24rem;
          margin: .3rem 0;
          padding: 0;
          font-weight: normal;
          font-family: 'Helvetica';
        }

        i {
          display: flex;
          width: 29px;
          height: 29px;
          background-image: url(../../../../assets/weather_icon_b.png);
          background-position: -26px 0;
          background-size: 350px auto;
        }
      }
    }

    .weekWeatherLow {
      position: absolute;
      top: 6rem;

    }

    .weatherChart {
      position: absolute;
      width: 100%;
      height: 2rem;
      // background-color: rebeccapurple;
      top: 2.6rem;
    }

    .weatherChart1 {
      position: absolute;
      width: 100%;
      height: 2rem;
      // background-color: rebeccapurple;
      top: 3.6rem;
    }
  }
}